<template>
  <div class="login-box">
    <div class="login-header">
      <div class="logo-box"></div>
      <div class="login-title">{{systemName}}</div>
    </div>
    <el-row class="login-content" type="flex">
      <el-col :xs="3" :sm="6" :md="7" :lg="8" :xl="9"></el-col>
      <el-col :xs="18" :sm="12" :md="10" :lg="8" :xl="6">
        <ul class="content-box">
          <div class="content-title">用户登录</div>
          <li class="content-list pad-bot20">
            <span class="list-icon icon-name"></span>
            <input class="list-input" type="text" v-model="userName" placeholder="用户名">
          </li>
          <li class="content-list">
            <span class="list-icon icon-password"></span>
            <input class="list-input" type="password" v-model="userPassword" placeholder="密码" @keydown.13="getLogin">
          </li>
          <li class="content-list remember-list">
            <a class="goto-register" href="#/register">
              <el-checkbox v-model="checked">记住密码</el-checkbox>
            </a>
            <a class="forget-pas" href="#/forgetpassword">忘记密码?</a>
          </li>
          <li class="content-list">
            <button class="login-btn" @click="getLogin" v-if="!logging">登 录</button>
            <button class="login-btn disabled" v-if="logging">正 在 登 录...</button>
          </li>
        </ul>
      </el-col>
      <el-col :xs="3" :sm="6" :md="7" :lg="8" :xl="9"></el-col>
    </el-row>
  </div>
</template>
<script>
  import * as CryptoJS from "crypto-js";
  export default {
    name: 'Login',
    data() {
      let baseUrl = managerRemoteGatewayUrl;
      return {
        isTest:true,
        userName: '',
        userPassword: '',
        checked: false,
        urls: {
          preLoginUrl: baseUrl + '/prelogin',
          loginUrl: baseUrl + '/login',
          getServerListUrl: baseUrl + '/menu/server/list', //获取所有服务
          getMenusUrl:"./static/json/menu.json"
        },
        key: '',
        logging: false,
        menus: [],
        systemName:systemName
      }
    },
    mounted() {
      if(this.isTest)return ;
      this.getKey();
      sessionStorage.setItem("userInfo", "{}");
    },
    methods: {
      getKey() {
        let me = this;
        this.httpRequest('get',this.urls.preLoginUrl,{},{
          ignoreEmptyData: true,
          fullSuccess: true,
        }).then(res => {
          me.key = res.value;
          me.captchaKey = res.value.captchaKey
        });
      },
      stringEncrypt(word, keyword) {
        let key = CryptoJS.enc.Utf8.parse(keyword);
        let srcs = CryptoJS.enc.Utf8.parse(word);
        let encrypted = CryptoJS.AES.encrypt(srcs, key, {
          mode: CryptoJS.mode.ECB,
          padding: CryptoJS.pad.Pkcs7
        });
        return encrypted.toString();
      },
      getLogin() {
        //如果是没有后台，前台进行测试
         if(this.isTest)
         {
           //获取menu.json
           this.getMenus();
           return ;
         }

        let me = this, param = {};
        if (this.isEmpty(this.userName)) {
          this.message(this,'warn','用户名不能为空');
          return false;
        }
        if (this.isEmpty(this.userPassword)) {
          this.message(this,'warn','密码不能为空');
          return false;
        }
        if (this.isEmpty(this.key)) {
          this.getKey();
          this.message(this,'warn','校验码获取失败，请重新点击登录');
          return;
        }
        let name = this.stringEncrypt(this.userName, this.key.encryKey);
        let password = this.stringEncrypt(this.userPassword, this.key.encryKey);
        param = {username: name, password: password, key: this.key.key};
        this.logging = true;
        this.getMenus();
        this.httpRequest('post',this.urls.loginUrl,param,{
          // fullSuccess: true,
        }).then(res => {
          me.logging = false;
          sessionStorage.setItem("userInfo", JSON.stringify(res));
          this.getMenus();
        }).catch(err => {
          me.logging = false;
          me.getKey();
        });
      },
      //获取json中菜单
      getMenus(){
        this.httpRequest('get',this.urls.getMenusUrl,{},{hideSuccessTip:true}).then(res=>{
          if(res){
            sessionStorage.setItem("menus",JSON.stringify(res));
            this.$router.push({path: '/pages'});
          }
        })
      },
      /*组合树结构*/
      convert(data,parentId){
        let convertData = [];
        data.forEach((item,index) => {
          if(item.pid === parentId){
            convertData.push(item);
            this.convertChild(data,item,item.id);
          }
        });
        return convertData;
      },
      convertChild(arr,parentItem,parentId){
        parentItem.children = parentItem.children ? parentItem.children : [];
        arr.forEach(item => {
          if(item.pid === parentId){
            parentItem.children.push(item);
            this.convertChild(arr,item,item.id);
          }
        });
        return parentItem.children;
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "../../assets/styles/base_style";
  .login-box {
    height: 100%;
    background: url("../../assets/images/login/bg.png") no-repeat;
    background-size: 100% 100%;
    overflow-y: auto;
    @include scrollbarStyle(10px, 10px);
    button:focus {
      outline: none;
    }
    .login-header {
      padding: 14vh 0 8vh 0;
      display: flex;
      justify-content: center;
      .logo-box{
        background: url("../../assets/images/login/logo.png") no-repeat;
        background-size: 100% 100%;
        width: 72px;
        height: 78px;
      }
      .login-title {
        font-size: 60px;
        font-weight: bold;
        background-image: linear-gradient(to bottom, rgb(1, 242, 255), rgb(78, 81, 212));
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
        padding-left: 20px;
      }
      @include mediaScreen(md){
        .logo-box{
          width: 62px;
          height: 68px;
        }
        .login-title{
          font-size: 50px;
        }
      }
      @include mediaScreen(sm){
        .logo-box{
          width: 52px;
          height: 58px;
        }
        .login-title{
          font-size: 40px;
        }
      }
      @include mediaScreen(xs){
        .logo-box{
          width: 40px;
          height: 46px;
        }
        .login-title{
          font-size: 28px;
        }
      }
    }
    .login-content {
      padding-bottom: 20px;
      .content-box {
        /*width: 480px;*/
        width:100%;
        padding: 40px 45px 50px 45px;
        margin: 0 auto;
        background: url("../../assets/images/login/center-bg.png") no-repeat;
        background-size: 100% 100%;
        text-align: center;
        .content-title {
          font-size: 38px;
          color: #fff;
          padding-bottom: 40px;
          letter-spacing: 2px;
        }
        @include mediaScreen(sm){
          .content-title{
            font-size: 32px;
          }
        }
        @include mediaScreen(xs){
          .content-title{
            font-size: 25px;
          }
        }
        .pad-bot20 {
          padding-bottom: 34px;
        }
        .content-list:after {
          @include clearFloat;
        }
        .content-list {
          position: relative;
          .list-icon {
            display: inline-block;
            position: absolute;
            left: 20px;
          }
          .icon-name {
            background: url("../../assets/images/login/icon-username.png") no-repeat;
            background-size: 100% 100%;
            width: 21px;
            height: 23px;
            top: calc((56px - 21px) / 2);
          }
          .icon-password {
            background: url("../../assets/images/login/icon-password.png") no-repeat;
            background-size: 100% 100%;
            width: 22px;
            height: 26px;
            top: calc((56px - 26px) / 2);
          }
          .list-input{
            width: 100%;
            height: 56px;
            padding: 15px 10px 15px 56px;
            font-size: 18px;
            color: #fff;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid #113d73;
            border-radius: 5px;
            outline: none;
            &:focus {
              border: 1px solid #128ec5;
            }
          }
          input::-webkit-input-placeholder { // 针对 谷歌 内核
            color: #fff;
            font-size: 20px;
            letter-spacing: 2px;
          }
          input:-moz-placeholder { // 火狐
            color: #fff;
            font-size: 20px;
            letter-spacing: 2px;
          }
          input:-ms-input-placeholder { // 微软ie
            color: #fff;
            font-size: 20px;
            letter-spacing: 2px;
          }
          .forget-pas, .goto-register {
            cursor: pointer;
            font-size: 16px;
            letter-spacing: 2px;
          }
          .forget-pas {
            float: right;
            color: #00b8ff;
          }
          .goto-register {
            font-size: 16px;
            color: #fff;
            float: left;
          }
          .login-btn {
            width: 100%;
            line-height: 56px;
            font-size: 26px;
            color: #fff;
            background-image: linear-gradient(to bottom, rgb(0, 184, 255), rgb(1, 119, 228));
            border-radius: 5px;
            border:none;
            cursor: pointer;
            &:hover {
              background: rgba(0, 120, 255, 0.8);
            }
            &.disabled {
              cursor: not-allowed;
              background: #6CB7F5;
              border: 1px solid rgba(195, 244, 160, 0.7);
            }
          }
          @include mediaScreen(sm){
            .login-btn{
              font-size: 24px;
            }
          }
          @include mediaScreen(xs){
            .login-btn{
              font-size: 22px;
            }
          }
        }
        .remember-list:after {
          @include clearFloat;
        }
        .remember-list {
          margin: 24px 0 30px 0;
        }
      }
    }
  }
</style>
<style lang="scss">
  .goto-register {
    .el-checkbox__label {
      font-size: 16px;
      color: #fff;
    }
  }
</style>
